<template>
	<div class='control-fixed m-no-select cursor_default'>
        <div class="remote_state_wrap">
            <span class="view_switch" @click="viewShow=false" v-show="remoteState==5&&viewShow"></span>
            <div class="remote_head" v-show="remoteState==5&&!viewShow">
                <div class="r_head_left">
                    <span :class="remoteState==5?'succ_icon':'err_icon'"></span>{{remoteState==5?"远程连接中":"远程已结束"}}
                </div>
                <div class="r_head_right" @click="viewShow=true"><span></span></div>
            </div>
            <div v-show="viewShow">
                <div class="remote_main">
                    <div><img src="static/image/home/chat/remote_computer_big.png"/></div>
                    <div><img :src="remoteState==1||remoteState==2||remoteState==3||remoteState==4?'static/image/home/chat/remote_connect.png':remoteState==5?'static/image/home/chat/remote_agree.png':'static/image/home/chat/remote_refuse.png'"/></div>
                    <div><img src="static/image/home/chat/remote_computer_small.png"/></div>
                </div>
                <!-- zk15修改_toInfo->toInfo -->
                <div class="remote_text">
                    {{remoteState==1?`您正在请求远程控制${toControlName||''}电脑,请等待对方确认...`:remoteState==2?
                `正在邀请${toControlName||''}进行远程协助,请等待对方确认...`:remoteState=='3'?`${requestUser.name}正在请求远程控制您的电脑,您接收吗?`:remoteState=='4'?`${requestUser.name}请求您进行远程协助,您接收吗?`
                :remoteState=='5'?'远程连接建立成功':remoteState=='7'?`远程连接中...`:`远程连接已结束...`}}
                </div>
                <div class="remote_footer">
                    <button style="height:24px;width:60px;vertical-align:middle;line-height:24px;" class="determine_btn" 
                        @click.stop.prevent="remoteConfirm" v-if="(control_type==3||control_type==4)&&$store.state.connectRemoteServer">接受</button>
                    <button style="height:24px;width:60px;line-height:24px;vertical-align:middle;" @click.stop.prevent='close' 
                        class="default_btn">{{remoteState==3||remoteState==4?'拒绝':remoteState==5?"结束":remoteState==6?"确定":'取消'}}</button>
                </div>
            </div>
        </div>
	</div>
</template>

<script>
import {mapState} from 'vuex'
	export default {
		name: 'remote',
		props: {
			title:{
				type:String,
				default:'',
			},
			content:{
				type:String,
				default:''
            },
            control_type:{
                type:Number,
                default:0
            },
            toInfo:{
                type:Object,
                default:{
                    name:''
                }
            },
            requestUser:{
                type:Object,
                default:{
                    name:''
                }
            },
            myControlPassword:{
                type:String,
                default:""
            },
            toRegisterid:{
                type:String,
                default:""
            },
            toControlPassword:{
                type:String,
                default:""
            },
            remoteState:{
                type:Number,
                default:0
            },
            controlViwe_show:{
                type:Boolean,
                default:false
            },
            remoteType:{
                type:Number,
                default:0
            },
            toControlLabel:{
                type:Number,
                default:2
            },
            toControlName:{
                type:String,
                default:''
            }
		},
		data() {
			return {
                viewShow:true,
                _toInfo:{
                    name:""
                },
			}
        },
        watch:{
            controlViwe_show(){
                if(this.controlViwe_show){
                    this.viewShow=true;
                    console.log(JSON.parse(JSON.stringify(this.toInfo)),'toinfo');
                    this._toInfo=JSON.parse(JSON.stringify(this.toInfo));

                }
            },
            remoteState(){
                if(this.remoteState==6){
                    this.viewShow=true;
                }
            },
        },
        computed:{
            ...mapState(['myInfo','ws'])
        },
		methods: {
            //control_type remoteState 1 请求远程控制 2请求远程协助 3对方接收远程控制请求 4对方接收远程协助请求  5远程连接成功  6中断
            // remoteType 1主动调用远程接口方 2被远程方
			remoteConfirm(){
                if(!this.$store.state.connectRemoteServer){
                    this.$message({
                        message: '远程服务连接中，请稍后重试',
                        type: "warning"
                    })
                    this.$remoteControlConnect()
                    return
                }                
                console.log('同意远程控制',this.myRegisterid,this.myControlPassword);
                // this.$emit('setControlType',5);
                let initid = this.$func.uuid();
                this.ws.send(this.$publicSend(initid,'1.500','1.1.1018',{label:2,requestId:this.myInfo.id,receptionId:this.requestUser.id,registerid:this.$store.state.myRegisterid,password:this.$store.state.myControlPassword}));
                if(this.control_type==4){
                    console.log('远程协助');
                    let res=this.$remoteControl('OpenRemote',[this.toRegisterid,this.toControlPassword]);
                    console.log(res,'远程协助',this.toRegisterid,this.toControlPassword);
                }
                // console.log('同意远程控制');
                this.$emit('setControlType',7);//zk18修改，连接之后再修改control_type和remoteState
			},
			close() {
                if(this.control_type==6){
                    this.$emit('controlClose');
                }else{
                    let initid = this.$func.uuid();
                    console.log('关闭',this.control_type)
                    if(this.control_type==1||this.control_type==2||this.control_type==5||this.control_type==7){
                        if(this.control_type==5&&this.remoteType==1){
                            this.$emit('setRemoteType',0)
                            let res=this.$remoteControl('CloseRemote',[]);
                            console.log('关闭',res);
                        }
                        this.ws.send(this.$publicSend(initid,'1.500','1.1.1017',{label:this.toControlLabel,requestId:this.myInfo.id,receptionId:this.requestUser.id,type:2}));
                    }else if(this.control_type==3||this.control_type==4){
                        this.ws.send(this.$publicSend(initid,'1.500','1.1.1017',{label:this.toControlLabel,requestId:this.myInfo.id,receptionId:this.requestUser.id,type:1}));
                    }
                    this.$emit('setControlType',6);
                    this.$emit('controlClose');
                }
                
			},
		}
	}
</script>